// 鼠标点击彩带效果 JavaScript
(function () {
    'use strict';

    // 注入CSS样式
    function injectCSS() {
        const style = document.createElement('style');
        style.textContent = `
            /* 彩带粒子样式 */
            .confetti-particle {
                position: fixed;
                pointer-events: none;
                z-index: 9999;
                border-radius: 50%;
                animation: confetti-fall linear forwards;
            }
            
            /* 移除CSS动画，改用JavaScript物理动画 */
        `;
        document.head.appendChild(style);
    }

    // 彩带颜色数组
    const colors = [
        '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',
        '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43',
        '#10ac84', '#ee5a24', '#0abde3', '#3867d6', '#8c7ae6',
        '#f368e0', '#fd79a8', '#fdcb6e', '#6c5ce7', '#a29bfe'
    ];

    // 创建圆形彩带粒子
    function createConfettiParticle(x, y, angle, velocity) {
        const particle = document.createElement('div');
        particle.className = 'confetti-particle';

        const size = Math.random() * 8 + 4;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const duration = Math.random() * 2 + 2.5;

        // 计算初始速度分量
        const vx = Math.cos(angle) * velocity;
        const vy = Math.sin(angle) * velocity;

        // 重力和阻力参数
        const gravity = 980; // 像素/秒²
        const drag = 0.98;

        particle.style.width = size + 'px';
        particle.style.height = size + 'px';
        particle.style.backgroundColor = color;
        particle.style.left = x + 'px';
        particle.style.top = y + 'px';
        particle.style.position = 'fixed';
        particle.style.pointerEvents = 'none';
        particle.style.zIndex = '9999';
        particle.style.borderRadius = '50%';

        document.body.appendChild(particle);

        // 物理动画
        let currentX = x;
        let currentY = y;
        let velocityX = vx;
        let velocityY = vy;
        let opacity = 1;
        let rotation = 0;

        const startTime = Date.now();

        function animate() {
            const elapsed = (Date.now() - startTime) / 1000;

            if (elapsed >= duration) {
                if (particle.parentNode) {
                    particle.parentNode.removeChild(particle);
                }
                return;
            }

            // 更新速度（重力和阻力）
            velocityY += gravity * 0.016; // 假设60fps
            velocityX *= drag;
            velocityY *= drag;

            // 更新位置
            currentX += velocityX * 0.016;
            currentY += velocityY * 0.016;

            // 更新旋转和透明度
            rotation += 5;
            opacity = Math.max(0, 1 - elapsed / duration);

            // 应用变换
            particle.style.left = currentX + 'px';
            particle.style.top = currentY + 'px';
            particle.style.opacity = opacity;
            particle.style.transform = `rotate(${rotation}deg)`;

            requestAnimationFrame(animate);
        }

        requestAnimationFrame(animate);
    }

    // 创建条状彩带
    function createConfettiStrip(x, y, angle, velocity) {
        const strip = document.createElement('div');
        strip.className = 'confetti-strip';

        const width = Math.random() * 15 + 5;
        const height = Math.random() * 8 + 3;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const duration = Math.random() * 2.5 + 2.5;

        // 计算初始速度分量
        const vx = Math.cos(angle) * velocity;
        const vy = Math.sin(angle) * velocity;

        // 重力和阻力参数
        const gravity = 800;
        const drag = 0.99;

        strip.style.width = width + 'px';
        strip.style.height = height + 'px';
        strip.style.backgroundColor = color;
        strip.style.left = x + 'px';
        strip.style.top = y + 'px';
        strip.style.position = 'fixed';
        strip.style.pointerEvents = 'none';
        strip.style.zIndex = '9999';
        strip.style.borderRadius = '2px';

        document.body.appendChild(strip);

        // 物理动画
        let currentX = x;
        let currentY = y;
        let velocityX = vx;
        let velocityY = vy;
        let opacity = 1;
        let rotation = Math.random() * 360;
        let rotationSpeed = (Math.random() - 0.5) * 20;

        const startTime = Date.now();

        function animate() {
            const elapsed = (Date.now() - startTime) / 1000;

            if (elapsed >= duration) {
                if (strip.parentNode) {
                    strip.parentNode.removeChild(strip);
                }
                return;
            }

            // 更新速度
            velocityY += gravity * 0.016;
            velocityX *= drag;
            velocityY *= drag;

            // 更新位置
            currentX += velocityX * 0.016;
            currentY += velocityY * 0.016;

            // 更新旋转和透明度
            rotation += rotationSpeed;
            opacity = Math.max(0, 1 - elapsed / duration);

            // 应用变换
            strip.style.left = currentX + 'px';
            strip.style.top = currentY + 'px';
            strip.style.opacity = opacity;
            strip.style.transform = `rotate(${rotation}deg)`;

            requestAnimationFrame(animate);
        }

        requestAnimationFrame(animate);
    }

    // 创建星星彩带
    function createConfettiStar(x, y, angle, velocity) {
        const star = document.createElement('div');
        star.innerHTML = '★';

        const size = Math.random() * 20 + 15;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const duration = Math.random() * 3 + 2.5;

        // 计算初始速度分量
        const vx = Math.cos(angle) * velocity;
        const vy = Math.sin(angle) * velocity;

        // 重力和阻力参数
        const gravity = 600;
        const drag = 0.995;

        star.style.fontSize = size + 'px';
        star.style.color = color;
        star.style.left = x + 'px';
        star.style.top = y + 'px';
        star.style.position = 'fixed';
        star.style.pointerEvents = 'none';
        star.style.zIndex = '9999';
        star.style.userSelect = 'none';

        document.body.appendChild(star);

        // 物理动画
        let currentX = x;
        let currentY = y;
        let velocityX = vx;
        let velocityY = vy;
        let opacity = 1;
        let rotation = 0;
        let scale = 1;

        const startTime = Date.now();

        function animate() {
            const elapsed = (Date.now() - startTime) / 1000;

            if (elapsed >= duration) {
                if (star.parentNode) {
                    star.parentNode.removeChild(star);
                }
                return;
            }

            // 更新速度
            velocityY += gravity * 0.016;
            velocityX *= drag;
            velocityY *= drag;

            // 更新位置
            currentX += velocityX * 0.016;
            currentY += velocityY * 0.016;

            // 更新旋转、缩放和透明度
            rotation += 8;
            scale = 1 + Math.sin(elapsed * 4) * 0.2;
            opacity = Math.max(0, 1 - elapsed / duration);

            // 应用变换
            star.style.left = currentX + 'px';
            star.style.top = currentY + 'px';
            star.style.opacity = opacity;
            star.style.transform = `rotate(${rotation}deg) scale(${scale})`;

            requestAnimationFrame(animate);
        }

        requestAnimationFrame(animate);
    }

    // 创建彩带爆炸效果
    function createConfettiExplosion(x, y) {
        const particleCount = Math.random() * 20 + 15;
        const stripCount = Math.random() * 12 + 8;
        const starCount = Math.random() * 5 + 3;

        // 创建圆形粒子 - 360度均匀分布
        for (let i = 0; i < particleCount; i++) {
            const angle = (Math.PI * 2 * i) / particleCount + (Math.random() - 0.5) * 0.5;
            const velocity = Math.random() * 300 + 150;
            const delay = Math.random() * 50;

            setTimeout(() => {
                createConfettiParticle(x, y, angle, velocity);
            }, delay);
        }

        // 创建条状彩带 - 随机角度但偏向上方
        for (let i = 0; i < stripCount; i++) {
            const angle = (Math.random() - 0.5) * Math.PI - Math.PI / 2 + (Math.random() - 0.5) * 0.8;
            const velocity = Math.random() * 400 + 200;
            const delay = Math.random() * 80;

            setTimeout(() => {
                createConfettiStrip(x, y, angle, velocity);
            }, delay);
        }

        // 创建星星 - 较大的发射角度
        for (let i = 0; i < starCount; i++) {
            const angle = (Math.random() - 0.5) * Math.PI * 1.2 - Math.PI / 2;
            const velocity = Math.random() * 350 + 180;
            const delay = Math.random() * 100;

            setTimeout(() => {
                createConfettiStar(x, y, angle, velocity);
            }, delay);
        }
    }

    // 页面加载时的初始彩带效果
    function createInitialConfetti() {
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        // 随机生成10次彩带爆炸
        for (let i = 0; i < 6; i++) {
            setTimeout(() => {
                const randomX = Math.random() * windowWidth;
                const randomY = Math.random() * windowHeight;
                createConfettiExplosion(randomX, randomY);
            }, i * 1000); // 0.5-2.5秒内随机触发
        }
    }

    // 防抖函数，避免过于频繁的点击
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // 鼠标点击事件处理
    const handleClick = debounce((event) => {
        // 获取点击位置
        const x = event.clientX;
        const y = event.clientY;

        // 创建彩带效果
        createConfettiExplosion(x, y);
    }, 200); // 200ms防抖

    // 初始化彩带效果
    function initConfettiEffect() {
        // 注入CSS样式
        injectCSS();

        // 页面加载完成后触发初始彩带
        createInitialConfetti();

        // 添加点击事件监听器
        document.addEventListener('click', handleClick);

        // 添加触摸事件支持（移动设备）
        document.addEventListener('touchstart', (event) => {
            if (event.touches.length === 1) {
                const touch = event.touches[0];
                const x = touch.clientX;
                const y = touch.clientY;
                createConfettiExplosion(x, y);
            }
        });
    }

    // 页面加载完成后初始化
    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initConfettiEffect);
        } else {
            initConfettiEffect();
        }
    }

    // 启动
    init();
})();

// 导出函数供外部调用（可选）
window.ConfettiEffect = {
    // 手动触发彩带效果
    trigger: function (x, y) {
        if (typeof x === 'undefined' || typeof y === 'undefined') {
            // 如果没有提供坐标，在屏幕中央触发
            x = window.innerWidth / 2;
            y = window.innerHeight / 2;
        }

        // 创建彩带爆炸效果的函数需要在全局作用域中可访问
        const colors = [
            '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',
            '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43'
        ];

        // 简化版的手动触发函数
        for (let i = 0; i < 20; i++) {
            setTimeout(() => {
                const particle = document.createElement('div');
                particle.style.position = 'fixed';
                particle.style.pointerEvents = 'none';
                particle.style.zIndex = '9999';
                particle.style.width = '6px';
                particle.style.height = '6px';
                particle.style.borderRadius = '50%';
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                particle.style.left = x + (Math.random() - 0.5) * 60 + 'px';
                particle.style.top = y + (Math.random() - 0.5) * 60 + 'px';
                particle.style.animation = 'confetti-fall ' + (Math.random() * 2 + 2) + 's linear forwards';

                document.body.appendChild(particle);

                setTimeout(() => {
                    if (particle.parentNode) {
                        particle.parentNode.removeChild(particle);
                    }
                }, 4000);
            }, Math.random() * 100);
        }
    }
};